<template>
	<view class="userLayout pageBg">
		<view class="" :style="{height:getNavBarHeight()+'px'}"></view>
		<view class="userInfo">
			<view class="avatar">
				<image class="avatar" src="../../static/xxmLogo.png" mode="aspectFill"></image>
			</view>
			<view class="ip">{{unserInfo.IP}}</view>
			<view class="address">来自于：{{unserInfo.address?.province||unserInfo.address?.city}}</view>
		</view>

		<view class="section">
			<view class="list">
				<view class="row" v-for="item of data1" @click="handleDownload(item._type,item.text)">
					<view class="left">
						<uni-icons :type="item.type" size="24"></uni-icons>
						<view class="text">{{ item.text }}</view>
					</view>
					<view class="right">
						<view class="text">{{ item.num }}</view>
						<uni-icons type="right" size="16"></uni-icons>
					</view>
				</view>
				<!-- #ifdef MP -->
				<button open-type="contact" class="button">联系客服</button>
				<!-- #endif -->
				<!-- #ifndef MP -->
				<button class="button" @click="handleContact">拨打电话</button>
				<!-- #endif -->
			</view>
		</view>

		<view class="section">
			<view class="list">
				<view class="row" v-for="item of data2">
					<view class="left">
						<uni-icons :type="item.type" size="24"></uni-icons>
						<view class="text">{{ item.text }}</view>
					</view>
					<view class="right">
						<view class="text">{{ item.num }}</view>
						<uni-icons type="right" size="16"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue';
import {getNavBarHeight} from '@/utils/system.js';
import { apiGet } from '@/api/apis.js';
import { onLoad } from '@dcloudio/uni-app';

// 用户信息
const unserInfo = ref({})

const downloadSize = computed(()=>unserInfo.value.downloadSize)

const scoreSize = computed(()=>unserInfo.value.scoreSize)




const data1 = ref([
	{
		type: 'download-filled',
		text: '我的下载',
		num: downloadSize,
		_type:'download'
	},
	{
		type: 'star-filled',
		text: '我的评分',
		num: scoreSize,
		_type:'score'
	},
	{
		type: 'weixin',
		text: '联系客服',
		num: '',
		_type:''
	}
]);
const data2 = ref([
	{
		type: 'notification-filled',
		text: '订阅更新',
		num: ''
	},
	{
		type: 'flag-filled',
		text: '常规问题',
		num: ''
	}
]);


onLoad(async ()=>{
	unserInfo.value = (await apiGet('userInfo')).data;
})



// 我的下载跳转函数
const handleDownload = (type,name) => {
	uni.navigateTo({
		url:`/pages/classlist/classlist?type=${type}&name=${name}`
	})
}

// 联系客服跳转函数
const handleContact = () => {
	uni.showModal({
		content: '是否拨打电话联系客服',
		cancelText: '否',
		confirmText: '是',
		success: (res) => {
			if (res.confirm) {
				uni.makePhoneCall({
					phoneNumber: '18365408115'
				});
			}
		}
	});
};






</script>
<style scoped lang="scss">
.userLayout {
	.userInfo {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 50rpx 0;

		.avatar {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.ip {
			font-size: 44rpx;
			color: #333;
			padding: 20rpx 0 5rpx;
		}
		.address {
			font-size: 28rpx;
			color: #aaa;
		}
	}

	.section {
		width: 690rpx;
		margin: 50rpx auto;
		border: 1px solid #eee;
		border-radius: 10rpx;
		box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);

		.list {
			position: relative;
			
			.row {
				display: flex;
				justify-content: space-between;
				padding: 0 30rpx;
				height: 100rpx;
				border-bottom: 1px solid #eee;
				background-color: #fff;
				
				&:last-child {
					border-bottom: none;
				}

				:deep() {
					.uni-icons {
						color: $brand-theme-color !important;
					}
				}
				

				.left {
					display: flex;
					align-items: center;

					.text {
						padding-left: 10rpx;
						color: #666;
					}
				}
				.right {
					display: flex;
					align-items: center;

					.text {
						font-size: 28rpx;
						color: #aaa;
					}
				}
			}

			.button {
				position: absolute;
				height: 100rpx;
				bottom: 0;
				width: 100%;
				opacity: 0;
			}
		}
	}
}
</style>
<style></style>
